@import "base.scss";
@import "mixin.scss";

.SY-wrapper {
    //common CSS
    .SY-mainBox > div {
        margin-bottom: $fontSize10;
    }
    //SY-albumNav
    .SY-albumNav {
        height: 5 * $fontSize10;
        line-height: 5 * $fontSize10;
        background: $colorfff;
        .title {
            padding-left: $fontSize20;
            font-size: $fontSize18;
            line-height: 5 * $fontSize10;
            color: $color111;
            font-weight: normal;
            margin-bottom: 0;
        }
    }
    //SY-buildAlbumBox
    .SY-buildAlbumBox {
        padding:$fontSize22 $fontSize20;
        background: $colorfff;
        .albumDetail {
            > div {
                margin-bottom: 3 * $fontSize10;
            }
            .title {
                margin-bottom: $fontSize20 + 5;
            }
            .heading {
                margin-bottom: $fontSize16;
                font-size: $fontSize16;
                color: $color666;
            }
            .albumTitle {
                input {
                    width: 55 * $fontSize10 + 2;
                    height: 2 * $fontSize12;
                    line-height: 2 * $fontSize12;
                    padding:$fontSize12 5 * $fontSize10 $fontSize12 $fontSize16;
                    font-size: $fontSize14;
                    color: $color333;
                    outline: none;
                    @include border(1px,solid,#c9c9c9);
                }
                .wordsLimit {
                    left: 57 * $fontSize10 + 2;
                    top: $fontSize18;
                    font-size: $fontSize14;
                    color: #c2c2c2;
                    &.warning i {
                        color: #ff0d0d;
                    }
                }
                .mark {
                    top: $fontSize18;
                    left: 63 * $fontSize10;
                    font-size: $fontSize18;
                    color: #ff0d0d;
                }
            }
            .albumDesc {
                textarea {
                    width: 113 * $fontSize10 + 5;
                    height: 17 * $fontSize10 + 6;
                    line-height: $lineHeight;
                    padding:$fontSize12 $fontSize12 $fontSize20;
                    font-size: $fontSize14;
                    color: $color333;
                    resize: none;
                    outline: none;
                    @include border(1px,solid,#c9c9c9);
                }
                .wordsLimit {
                    top: 22 * $fontSize10;
                    right: 0;
                    font-size: $fontSize14;
                    color: #c2c2c2;
                    &.warning i {
                        color: #ff0d0d;
                    }
                }
            }
        }
        .setCover {
            .uploadCover {
                width: 23 * $fontSize10 + 2;
                height: 14 * $fontSize10 + 2;
                overflow: hidden;
                &:hover {
                    .deleteBtn {
                        display: block;
                    }
                }
                .unUpload {
                    @extend .uploaded;
                    background: $colorea;
                    a {
                        @extend .uploaded;
                        font-size: $fontSize12;
                        color: $colorab;
                    }
                    i {
                        font-size: $fontSize20;
                        margin:4 * $fontSize10 0 $fontSize10 / 2;
                    }
                    .text {
                        font-size: $fontSize12 + 1;
                        margin-bottom: $fontSize12 / 3;
                    }
                    input {
                        @extend .uploaded;
                        top: 0;
                        left: 0;
                        @include opacity(0);
                        z-index: 5;
                        cursor: pointer;
                    }
                }
                .uploaded {
                    width: 100%;
                    height: 100%;
                }
                .coverPic {
                    @extend .uploaded;
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: cover;
                }
                .deleteBtn {
                    display: none;
                    top: 0;
                    right: 0;
                    width: 4 * $fontSize10 + 2;
                    height: 2 * $fontSize16;
                    line-height: 2 * $fontSize16;
                    text-align: center;
                    font-size: $fontSize16;
                    cursor: pointer;
                    background: rgba(0,0,0,.2);
                    z-index: 9;
                    @include link-colors($colorfff,#ff0d0d);
                }
            }
        }
        .workListBox {
            margin-top: 5 * $fontSize10;
            .emptyInfo {
                padding: 10 * $fontSize10 0;
                font-size: $fontSize16;
                color: $colorab;
            }
            .listBox {
                ul {
                    max-height: 54 * $fontSize10 + 6;
                    overflow-x: hidden;
                    overflow-y: auto;
                    &::-webkit-scrollbar {
                        width: $fontSize10 / 2;
                        height: $fontSize10 / 2;
                    }
                    &::-webkit-scrollbar-track {
                        background: #FF66D5;
                    }
                    &::-webkit-scrollbar-thumb {
                        background:$colorccc;
                        @include borderRadius(16px);
                    }
                    &::-webkit-scrollbar-track-piece {
                        background: #eee;
                    }
                }
            }
            .item {
                width: 27 * $fontSize10 + 8;
                height: 16 * $fontSize10 + 8;
                margin:0 $fontSize16 / 2 $fontSize14 0;
                overflow: hidden;
                &:nth-child(4n) {
                    margin-right: 0;
                }
                a {
                    width: 100%;
                    height: 100%;
                }
                .albumPic {
                    width: 100%;
                    height: 100%;
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: cover;
                }
                .cover {
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    @include linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.6));
                    z-index: 5;
                }
                .choosedIcon {
                    display: none;
                    top: $fontSize16 / 2;
                    right: $fontSize16 / 2;
                    width: $fontSize20 + 8;
                    line-height: $fontSize20 + 8;
                    text-align: center;
                    font-size: $fontSize16;
                    color: $colorfff;
                    z-index: 9;
                    background: $theme;
                }
                .msg {
                    bottom: $fontSize10;
                    left: 0;
                    width: 26 * $fontSize10;
                    line-height: $lineHeight;
                    padding:0 $fontSize10;
                    color: $colorfff;
                    z-index: 9;
                }
                .workName {
                    font-size: $fontSize14;
                }
                &.video .playTips,&.live .livingIcon,&.picture .picIcon,&.article .articleIcon {
                    top: $fontSize12 / 2;
                    left: $fontSize12 / 2;
                    width: $fontSize12 * 2;
                    height: $fontSize20;
                    line-height: $fontSize20;
                    color: $colorea;
                    background: rgba(0,0,0,.5);
                    z-index: 9;
                }
                &.video .playTips {
                    font-size: $fontSize12;
                }
                &.live .livingIcon {
                    font-size: $fontSize12 + 1;
                }
                &.picture .picIcon {
                    padding:0 $fontSize16 / 2;
                    font-size: $fontSize12;
                    .num {
                        margin-left: $fontSize12 / 3;
                    }
                }
                &.article .articleIcon {
                    width: $fontSize12 * 2 + 4;
                    height: $fontSize20 + 8;
                    line-height: $fontSize20 + 8;
                    font-size: $fontSize14;
                }
            }
            .choosedTips,.tipsBox {
                margin-top: $fontSize20;
                padding-top: $fontSize20;
                border-top: 1px solid $colore5;
            }
            .choosedTips {
                font-size: $fontSize16;
                .num {
                    color: $theme;
                }
            }
            .tipsBox {
                font-size: $fontSize14;
                color: $colorab;
            }
            .btns {
                margin-top: 3 * $fontSize20;
                a {
                    width: 14 * $fontSize10 + 3;
                    height: 4 * $fontSize10 + 2;
                    line-height: 4 * $fontSize10 + 2;
                    text-align: center;
                    font-size: $fontSize16;
                    color: $colorfff;
                    margin-right: 4 * $fontSize10;
                }
            }
            .saveBtn {
                @include link-posColor($theme,$darkTheme);
            }
            .cancelBtn {
                @include link-posColor(#d6d6d6,#b9b9b9);
            }
        }
        .navBox {
            padding-bottom: $fontSize14;
            margin-bottom: $fontSize20 + 5;
            border-bottom: 1px solid $colore5;
        }
        .leftTab {
            li {
                a {
                    margin-right: $fontSize20;
                    font-size: $fontSize16;
                    color: $colorab;
                }
                &.active {
                    a {
                        color: $color111;
                    }
                }
                .num {
                    font-size: $fontSize12;
                }
            }
            .searchBox {
                width: 27 * $fontSize10 + 2;
                height: 3 * $fontSize10 + 3;
                line-height: 3 * $fontSize10 + 3;
                vertical-align: top;
                margin-top: - $fontSize10;
                font-size: $fontSize12;
                overflow: hidden;
                @include border(1px,solid,#c9c9c9);
                a {
                    font-size: $fontSize14;
                    &:hover {
                        color: $color333;
                    }
                }
            }
            input {
                padding:$fontSize12 / 3 $fontSize16 / 2;
                width: 23 * $fontSize10;
                height: $fontSize20 + 5;
                border:none;
                outline: none;
                &::placeholder {
                    color: $colorab;
                }
            }
        }
        .rightTab {
            a {
                font-size: $fontSize14;
                i {
                    margin-right: $fontSize12 / 3;
                }
            }
            .toCreateBtn a {
                @include link-colors($theme,$darkTheme);
            }
            .line {
                &:after {
                    display: inline-block;
                    position: relative;
                    top: $fontSize12 / 4;
                    width: 0;
                    height: $fontSize16;
                    margin:0 $fontSize14;
                    content: "";
                    border-right: 1px solid $colorccc;
                }
            }
        }
        .alreadyHave {
            .item {
                &:hover {
                    .deleteBtn {
                        display: block;
                    }
                }
            }
            .deleteBtn {
                display: none;
                top: 0;
                right: 0;
                width: 4 * $fontSize10 + 2;
                height: 2 * $fontSize16;
                line-height: 2 * $fontSize16;
                text-align: center;
                font-size: $fontSize16;
                cursor: pointer;
                background: rgba(0,0,0,.2);
                z-index: 9;
                @include link-colors($colorfff,#ff0d0d);
            }
        }
    }
}
